<template>
  <div class="relaxtion-image">
    <el-tooltip class="item" effect="dark" content="字符雨" placement="bottom">
      <el-image style="width: 100px; height: 150px; margin-right: 20px;" fit="contain" :src="url" @click="open('rain.html')"></el-image>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="粒子旋涡" placement="bottom">
      <el-image style="width: 100px; height: 150px; margin-right: 20px;" fit="contain" :src="url" @click="open('lizi.html')"></el-image>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="3D特效" placement="bottom">
      <el-image style="width: 100px; height: 150px; margin-right: 20px;" fit="contain" :src="url" @click="open('three.html')"></el-image>
    </el-tooltip>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        url: 'https://img2.huashi6.com/images/resource/2021/03/28/887482h38p0.jpg?imageView2/3/q/100/interlace/1/w/448/h/1600/format/webp'
      }
    },
    methods: {
      open(fileName) {
        const aLink = document.createElement("a");
        aLink.target = "_blank";
        aLink.href = "http://localhost:8080/plants/perfect/" + fileName;
        aLink.click();
      }
    }
  }
</script>
